<template>
  <!-- 搜索框  -->
  <div class="p-2 pt-4 bg-white">
    <Form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      layout="horizontal"
      :model="formState"
      @finish="onFinish"
    >
      <Row :gutter="24">
        <Col :span="16">
          <div class="search-flex">
            <FormItem class="ml-10" name="country" label="选择国家" required>
              <Select v-model:value="formState['country']" style="width: 160px; margin-right: 6px">
                <SelectOption value="美国">美国</SelectOption>
                <SelectOption value="英国">英国</SelectOption>
                <SelectOption value="欧洲四国">欧洲四国</SelectOption>
                <SelectOption value="日本">日本</SelectOption>
                <SelectOption value="加拿大">加拿大</SelectOption>
              </Select>
            </FormItem>

            <FormItem class="ml-10" name="month" label="选择月份" required>
              <DatePicker
                v-model:value="formState['month']"
                value-format="YYYY-MM"
                picker="month"
              />
            </FormItem>
            <FormItem class="ml-10" name="month_num" label="月总订单量" required style="width: 250px">
              <a-input type="number" min="1" max="10" v-model:value="formState['month_num']" placeholder="月总订单量"/>
            </FormItem>
            <FormItem class="ml-10" name="asin" label="ASIN" style="width: 250px">
              <a-input type="text" v-model:value="formState['asin']" placeholder="ASIN"/>
            </FormItem>
            <FormItem class="ml-10" name="is_limit" label="是否已标记">
              <Select v-model:value="formState['is_limit']" style="width: 160px; margin-right: 6px">
                <SelectOption value="">选择是否已标记...</SelectOption>
                <SelectOption value="0">否</SelectOption>
                <SelectOption value="1">是</SelectOption>
              </Select>
            </FormItem>
            <FormItem class="ml-10" name="status" label="在售状态">
              <Select v-model:value="formState['status']" style="width: 160px; margin-right: 6px">
                <SelectOption value="">选择是否在售...</SelectOption>
                <SelectOption value="在售">在售</SelectOption>
                <SelectOption value="不在售">不在售</SelectOption>
              </Select>
            </FormItem>
            <FormItem class="ml-10" name="group_name" label="选择项目组">
              <ApiSelect
                style="width: 180px"
                :api="getAllGroup"
                showSearch
                v-model:value="formState['group_name']"
                :filterOption="false"
                resultField="list"
                labelField="name"
                valueField="name"
              />
            </FormItem>
            <FormItem class="ml-10" name="limit_type" label="限制类型">
              <ApiSelect
                style="width: 160px"
                :api="getAllLimitType"
                v-model:value="formState['limit_type']"
                :filterOption="false"
                resultField="list"
                labelField="name"
                valueField="value"
              />
            </FormItem>
          </div>
        </Col>
        <Col :span="8" style="text-align: right">
          <Button type="primary" html-type="submit">搜索</Button>
          <Button @click="() => formRef.resetFields()">清空</Button>
          <Button type="danger" @click="group_limit()">批量限制</Button>
          <Popconfirm placement="left"
            title="确定要导出表格吗？"
            ok-text="确定"
            cancel-text="算了"
            @confirm="export_xls"
          >
            <Button type="warning" :loading="loadingState">导出</Button>
          </Popconfirm>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script lang="ts" setup>
import {FormInstance, Select, SelectOption, Form, FormItem, Row, Col, Button, DatePicker, Popconfirm, message } from 'ant-design-vue'
import {ApiSelect} from '/@/components/Form';
import {useLoading} from '/@/components/Loading'
import {reactive, ref} from 'vue'
import {exportXls} from "/@/api/demo/product";
import {downloadByUrl} from '/@/utils/file/download';
import {getAllGroup} from "/@/api/demo/select";
import {getAllLimitType} from "/@/api/demo/task";

const props = defineProps({
  searchInfo: Object,
  loadingState: Boolean,
  exportType: String,
})
const emit = defineEmits(['confirmSearch', 'groupLimit'])
const loadingState = ref(false)
const formRef = ref<FormInstance>()

const formState = reactive({
  status: '',
  is_limit: '',
  limit_type: '',
  country: '',
  month: [],
  month_num: '',
  group_name: '',
  asin: '',
})

const [openFullLoading, closeFullLoading] = useLoading({
  tip: '加载中...',
});

formState['country'] = props.searchInfo.country
formState['month'] = props.searchInfo.month
formState['exportType'] = props.exportType

const export_xls = () => {
  if (!formState['country'] || !formState['month'] || !formState['month_num']){
    return message.error('请筛选国家、月份、月总订单量！');
  }

  loadingState.value = true
  openFullLoading()
  exportXls(formState).then(
    (res) => {
      downloadByUrl({
        url: res,
        target: '_self',
      });
      loadingState.value = false
      closeFullLoading()
    },
    () => {
      loadingState.value = false
      closeFullLoading()
    },
  )
}

const onFinish = (values: any) => {
  emit('confirmSearch', values)
}

const group_limit = () => {
  emit('groupLimit')
}

const onChange = (pageNumber: number) => {
  emit('pageClick', pageNumber)
}
</script>

<style scoped>
.search-flex {
  display: flex;
  flex-wrap: wrap;
}

.ml-10 {
  margin-left: 20px;
}

</style>
